<template>
  <div class="main"
    @touchstart="touchStart"
    @touchmove="touchMove"
    @touchend="touchEnd"
  >
    <slot></slot>
    <div class="i-ruler" :style="rulerAni"></div>
    <div class="i-bg-photo" :style="photoAni"></div>
    <div class="i-plant-note" :style="noteAni"></div>
    <div class="i-pen" :style="penAni"></div>
    <div class="arrow_up" :style="animation('fadeIn', 1, 1.5, 3)">  
      <span></span>  
      <span></span>  
    </div>  
  </div>
</template>

<script>
export default {
  data() {
    return {
      startY: 0,
      disY: 0
    }
  },
  props: {
    alternate: Boolean
  },
  computed: {
    rulerAni() {
      return this.alternate ? this.animation('outLeft', 1, 0.6, 0) : {}
    },
    markAni() {
      return this.alternate ? this.animation('fadeOut', 1, 0.6, 0.5) : this.animation('fadeIn', 1, 1.5, 1.8)
    },
    photoAni() {
      return this.alternate ? this.animation('outDown', 1, 0.6, 0.6) : this.animation('inDown', 1, 1.5, 1.8)
    },
    noteAni() {
      return this.alternate ? this.animation('outRight', 1, 0.6, 0) : {}
    },
    penAni() {
      return this.alternate ? this.animation('fadeOut', 1, 0.6, 0) : this.animation('fadeIn', 1, 1.5, 1.5)
    }
  },
  methods: {
    touchStart: function(ev) {
      ev = ev || event
      ev.preventDefault()
      if (ev.touches.length == 1) {
        //tounches类数组，等于1时表示此时有只有一只手指在触摸屏幕
        this.startY = ev.touches[0].clientY // 记录开始位置
        console.log('====this.startY ====', this.startY)
      }
    },
    touchMove: function(ev) {
      ev = ev || event
      ev.preventDefault()
      if (ev.touches.length == 1) {
        //实时的滑动的距离-起始位置=实时移动的位置
        this.disY = ev.touches[0].clientY - this.startY
      }
    },
    touchEnd: function(ev) {
      ev = ev || event
      ev.preventDefault()
      console.log('====end===', ev.touches.length)
      if (this.disY < 0 && Math.abs(this.disY) > window.innerHeight / 10) {
        // 向上滑动
        console.log('上滑')
        this.$store.dispatch('slideUp')
      } else if (this.disY > 0 && Math.abs(this.disY) > window.innerHeight / 10){
        // 向下滑动
        console.log('下滑')
        this.$store.dispatch('slideDown')
      }
    }
  }
}
</script>

<style scoped>
.main {
  position: absolute;
  width: 100%;
  height: 100%;
}
.i-ruler {
  position: absolute;
  left: 0;
  background: url('../assets/bg_rular.png') no-repeat;
  width: 5.4rem;
  height: 2.47rem;
  background-size: 100% 100%;
  top: 0.25rem;
}
.i-bg-mark {
  position: absolute;
  bottom: 0.7rem;
  left: 2.66rem;
  background: url('../assets/mark.png') no-repeat;
  background-size: 100% 100%;
  width: 0.65rem;
  height: 0.99rem;
}
.i-bg-photo {
  position: absolute;
  bottom: 0;
  right: 0;
  background: url('../assets/bg_photo.png') no-repeat;
  background-size: 100% 100%;
  width: 2.08rem;
  height: 1.24rem;
}
.i-plant-note {
  position: absolute;
  top: 0;
  right: 0;
  background: url('../assets/plant_note.png') no-repeat;
  background-size: 100% 100%;
  width: 2.44rem;
  height: 6.24rem;
}
.i-pen {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0, 5%);
  background: url('../assets/bg_paint2.png') no-repeat;
  background-size: 100% 100%;
  width: 7.18rem;
  height: 5.84rem;
  touch-action: none;
  pointer-events: none;
}
.arrow_up{             
    position: absolute;  
    left: 50%;  
    bottom: 100px;  
    color: white;
}  
.arrow_up span{ 
    position: absolute;  
    width: 20px;  
    height: 20px;  
    top: 10px;  
    -webkit-transform:rotate(45deg);  
    border-top: 1px solid white;  
    border-left: 1px solid white;  
    margin-left: -10px;  
    opacity: 0;  
    -webkit-animation: up 2s infinite;  
    animation: up 2s infinite;  
}  
.arrow_up span:nth-of-type(2){  
    top: 20px;  
}  
.arrow_up span:nth-of-type(1){  
    -webkit-animation-delay: .15s;  
    animation-delay: .15s;  
}
</style>
